<template>
    <div>
        <h1>待办事项</h1>
        <HeaderCom @add="handlerAdd"/>
        <MainCom :list="todoList" @del="handlerDel" @change="handlerChange"/>
        <FooterCom :list="todoList" @show="handlerShow"/>
    </div>
</template>

<script>
import HeaderCom from './components/0325/HeaderCom.vue';
import MainCom from './components/0325/MainCom.vue';
import FooterCom from './components/0325/FooterCom.vue';
    export default{
        data(){
            return{
                todoList:[
                    {
                        id:1,
                        content:"阅读",
                        state:false
                    },
                    {
                        id:2,
                        content:"唱歌",
                        state:false
                    },
                    {
                        id:3,
                        content:"打球",
                        state:false
                    },
                ],
                copyList:[]
            }
        },
        created(){
            this.copyList = this.todoList.slice()
        },
        components:{
            HeaderCom,
            MainCom,
            FooterCom
        },
        methods:{
            handlerAdd(content){
                this.todoList.push({
                    id:+new Date(),
                    content:content,
                    state:false
                })
                this.copyList = this.todoList.slice()
            },
            handlerDel(i){
                this.todoList.splice(i,1)
                this.copyList = this.todoList.slice()
            },
            handlerShow(flag){
                if(flag == "clear"){
                    this.todoList = []
                    this.copyList = []
                }else if (flag == "undo") {
                    this.todoList = this.copyList.filter((item) => item.state == false)
                }else if(flag == "done"){
                    this.todoList = this.copyList.filter((item) => item.state == true) 
                }else{
                    this.todoList = this.copyList.slice()
                }
            },
            handlerChange(){
                this.copyList = this.todoList.slice()
            }
        }
    }
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.red{
    display: flex;
    align-items: center;
}
.red input{
    height: 40px;
    width: 500px;
    border: 1px solid rgba(218, 1, 1, 0.769) !important;
    padding-left: 20px;
}
.red button{
    height: 40px;
    width: 180px;
    text-align: center;
    line-height: 40px;
    border: 2px solid rgba(218, 1, 1, 0.769);
    background-color: rgba(218, 1, 1, 0.769);
    color: #fff;
}
</style>